﻿@model ChurchDiary.TableEntity.EntityLabels
<script src="~/Scripts/ChurchControllers/FamilyMemberController.js"></script>
<div class="row" ng-controller="FamilyMemberController">
    <div class="search-bar collapsed">
        <div class="form-group">
            <div class="input-group input-group-lg">
                <input type="text" class="form-control" placeholder="Type to search..." ng-model="search" ng-change="filter()">
                <span class="input-group-btn">
                    <button class="btn btn-square btn-lg btn-default no-shadow close-search-bar" type="button"><i class="zmdi zmdi-close"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="bg-white bs-0 mb-20 widget">
            <ul class="nav nav-pills bg-black bs-inset-primary" role="tablist">
                <li role="presentation" class="pt-15 pb-15 pl-10 pr-20 mb-0">
                    <h3 class="fs-16 lh-1 m-0 text-white text-uppercase">@Html.LabelFor(m => m.FamilyMemberList)</h3>
                </li>
                <li class="pull-right pt-15 pb-15 pl-20 pr-10 fs-20 lh-1 mb-0">
                    <ul class="pull-right list-inline fs-16 lh-1 mb-0">
                        <li><a href="javascript:;" class="text-white" ng-click="toggle('add','')"><i class="fa fa-plus-circle"></i></a></li>
                    </ul>
                </li>
            </ul>
            <div class="widget-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <th>@Html.LabelFor(m => m.Name)&nbsp;<a ng-click="sort_by('family.Name');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>@Html.LabelFor(m => m.RelationShip)&nbsp;<a ng-click="sort_by('family.Name');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>@Html.LabelFor(m => m.Email)&nbsp;<a ng-click="sort_by('family.Name');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>@Html.LabelFor(m => m.Phone)&nbsp;<a ng-click="sort_by('family.Name');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>@Html.LabelFor(m => m.DateOfBirth)&nbsp;<a ng-click="sort_by('family.Email');"><i class="glyphicon glyphicon-sort"></i></a></th>
                                <th>@Html.LabelFor(m => m.Action)&nbsp;</th>
                            </thead>
                            <tbody>
                                <tr ng-class="{importantrow : data.IsHavingJobtitle=='YES'}" ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                                    <td>{{data.Name}}</td>
                                    <td>{{data.RelationShip.RelationShipName}}</td>
                                    <td>{{data.Email}}</td>
                                    <td>{{data.Phone}}</td>
                                    <td>{{data.DateOfBirth}}</td>
                                    <td>
                                        <div class="btn-group-sm" role="group" aria-label="Second group">
                                            <button type="button" class="btn btn-purple waves-effect" data-toggle="tooltip" data-placement="top" title="Create Jobtitle" ng-click="toggleRole('add',data.MemberId);" ng-if="data.IsBaptized==='YES'" ><i class="fa fa-graduation-cap"></i></button>
                                            <button type="button" class="btn btn-lime waves-effect" data-toggle="tooltip" data-placement="top" title="Marriage Register" ng-click="toggle('edit',data.MemberId);" ng-if="data.Gender==1" ng-show="data.CurrentAge>=21 && data.IsBaptized==='YES' && data.IsGetHgBaptism==='YES' && data.IsGetSalvation==='YES' && data.IsLeft==='NO' && data.IsMarried==='NO'"><i class="fa fa-life-ring"></i></button>
                                            <button type="button" class="btn btn-lime waves-effect" data-toggle="tooltip" data-placement="top" title="Marriage Register" ng-click="toggle('edit',data.MemberId);" ng-if="data.Gender==2" ng-show="data.CurrentAge>=18 && data.IsBaptized==='YES' && data.IsGetHgBaptism==='YES' && data.IsGetSalvation==='YES' && data.IsLeft==='NO' && data.IsMarried==='NO'"><i class="fa fa-life-ring"></i></button>
                                            <button type="button" class="btn btn-warning waves-effect" data-toggle="tooltip" data-placement="top" title="Left from Church" ng-click="toggle('edit',data.MemberId);"><i class="fa fa-arrow-right"></i></button>
                                            <button type="button" class="btn btn-green waves-effect" data-toggle="tooltip" data-placement="top" title="Baptisam Regiser" ng-click="GotoBaptismRegister(data.MemberId);" ng-if="data.IsBaptized=='NO' && data.CurrentAge>=12"><i class="fa fa-users"></i></button>
                                            <button type="button" class="btn btn-info waves-effect" data-toggle="tooltip" data-placement="top" title="Edit Member Details" ng-click="toggle('edit',data.MemberId);"><i class="fa fa-pencil"></i></button>
                                            <button type="button" class="btn btn-danger waves-effect" data-toggle="tooltip" data-placement="top" title="Delete Member Details" ng-click="delete(data.Name,data.MemberId)"><i class="fa fa-trash"></i></button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12" ng-show="filteredItems == 0">
                        <div class="col-md-12" style="text-align: center;">
                            <h4>@Html.LabelFor(c => c.NoData)</h4>
                        </div>
                    </div>
                </div>
                <div ng-show="filteredItems > 0" style="padding-right: 10px; text-align: right;">
                    <div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="Role" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{title}}</h4>
                </div>
                <form name="fromvRolealidate" novalidate>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Church Board</label>
                            <select ng-model="role.BoardId" ng-options="obj.BoardId as obj.BoardName for obj in ChurchBoards"
                                class="form-control" ng-required="true">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Jobtitle Name</label>
                            <select ng-model="role.BoardJobtitleId" ng-options="obj.BoardJobtitleId as obj.JobtitleName for obj in ChurchJobtitle"
                                class="form-control" ng-required="true">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Valid From</label>
                            <input type="text" class="form-control" calendar ng-model="role.validfrom" maxlength="100" ng-minlength="3" ng-required="true">
                        </div>
                        <div class="form-group">
                            <label>Valid to</label>
                            <input type="text" class="form-control" calendar ng-model="role.validto" maxlength="100" ng-minlength="3" ng-required="true">
                        </div>
                        <div class="form-group">
                            <label class="checkbox-inline checkbox-custom mr-15">
                                <input type="checkbox" value="remember" name="logincreate" ng-model="role.CreateLogin" id="exampleCheckboxEmail" checked="{{church.IsLoginCreated}}">
                                <label for="exampleCheckboxEmail">@Html.LabelFor(model => model.IsLoginCreated)</label>
                            </label>
                        </div>
                        <div class="form-group">
                            Status
                            <select ng-model="role.Status"
                                class="form-control" ng-required="true" ng-options="obj.StatusId as obj.StatusName for obj in JobtitleRolestatus">
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvRolealidate.$invalid || buttonstate" ng-click="SavejobtitleRole(modelstate,id);">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade bs-example-modal-panel" tabindex="-1" id="FamilyMember" role="dialog" aria-labelledby="myPanelModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myAnimationModalLabel">{{title}}</h4>
                </div>
                <form name="fromvalidate" novalidate>
                    <div class="modal-body">


                        <div class="form-group">
                            <input type="hidden" value="{{FamilyId}}" ng-model="family.FamilyId" />
                            <input type="hidden" ng-model="family.MemberId" />
                            @Html.LabelFor(m => m.Name)
                            <input type="text" class="form-control" name="Name" ng-model="family.Name" maxlength="100" ng-minlength="3" ng-required="true">
                            <p class="error" ng-show="fromvalidate.Name.$error.minlength">@Html.LabelFor(m => m.Name) @Html.LabelFor(m => m.Atleast4Charater)</p>
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(m => m.Gender)
                            <select ng-model="family.Gender" class="form-control" ng-required="true" name="relation" ng-options="obj.Gender as obj.GenderName for obj in Genders">
                            </select>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.RelationShip)
                            <select ng-model="family.RelationShipId"
                                ng-options="obj.RelationShipId as obj.RelationShipName for obj in relations"
                                class="form-control" ng-required="true" name="relation">
                            </select>
                            <p class="error" ng-show="fromvalidate.relation.$error.requiredd">@Html.LabelFor(m => m.RelationShip) @Html.LabelFor(m => m.Requried)</p>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.Phone)
                            <input type="text" class="form-control" name="TelephoneNo" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" ng-model="family.Phone" maxlength="12">
                            <p class="error" ng-show="fromvalidate.TelephoneNo.$error.pattern">@Html.LabelFor(m => m.InvalidPhone)</p>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.Email)
                            <input type="email" class="form-control" name="email" ng-model="family.Email">
                            <p class="error" ng-show="fromvalidate.email.$error.email">@Html.LabelFor(m => m.InvalidEmail)</p>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfBirth)
                            <input class="form-control" calendar ng-model='family.DateOfBirth' />
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfChildDedication)
                            <input class="form-control" calendar ng-model='family.DateOfDedication' />
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfSalvation)
                            <input class="form-control" calendar ng-model='family.DateOfSalvation' />
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfBaptism)
                            <input class="form-control" calendar ng-model='family.DateOfBaptism' />
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfHgBaptism)
                            <input class="form-control" calendar ng-model='family.DateOfHgBaptism' />
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.DateOfMarriage)
                            <input class="form-control" calendar ng-model='family.DateOfMarriage' />
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.Remarks)
                            <textarea class="form-control" ng-model="family.Remarks">
                                            </textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-disabled="fromvalidate.$invalid || buttonstate" ng-click="save(modelstate);">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
